<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商城管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑促销</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="基本信息" name="info">
					<div class="tab-content">
						<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
							<el-form-item label="是否启用">
								<el-switch :active-value="0" :inactive-value="1" v-model="model.status"></el-switch>
							</el-form-item>
							<el-form-item prop="startTime" label="开始时间">
								<el-date-picker v-model="model.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间"></el-date-picker>
							</el-form-item>
							<el-form-item prop="endTime" label="结束时间">
								<el-date-picker v-model="model.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"></el-date-picker>
							</el-form-item>
							<el-form-item prop="title" label="活动标题">
								<el-input v-model="model.title" placeholder="必填，128字符内"></el-input>
							</el-form-item>
							<el-form-item prop="condition" label="消费额度">
								<el-input v-model="model.condition" placeholder="必填，消费额度门槛">
									<template slot="append">
										元
									</template>
								</el-input>
							</el-form-item>
							<el-form-item prop="awardType" label="促销类型">
								<el-select v-model="model.awardType" placeholder="请选择...">
									<el-option label="1.阶梯满减" :value="1"></el-option>
									<el-option label="2.满额折扣" :value="2"></el-option>
									<el-option label="3.赠送积分" :value="3"></el-option>
									<el-option label="4.赠送优惠券" :value="4"></el-option>
									<el-option label="5.赠送赠品" :value="5"></el-option>
									<el-option label="6.免运费" :value="6"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="awardValue" label="阶梯满减" v-if="model.awardType===1">
								<el-input v-model="model.awardValue" placeholder="必填，阶梯满减的金额">
									<template slot="append">
										元
									</template>
								</el-input>
							</el-form-item>
							<el-form-item prop="awardValue" label="满减折扣" v-if="model.awardType===2">
								<el-slider v-model="model.awardValue" :min="1" :max="100" show-input>
								</el-slider>
							</el-form-item>
							<el-form-item prop="awardValue" label="赠送积分" v-if="model.awardType===3">
								<el-input v-model="model.awardValue" placeholder="必填，阶梯满减的金额">
									<template slot="append">
										分
									</template>
								</el-input>
							</el-form-item>
							<el-form-item label="赠送优惠券" v-if="model.awardType===4">
								<dt-coupon-select v-model="model.awardValue" :data="model.shopCoupon"></dt-coupon-select>
							</el-form-item>
							<el-form-item label="关联赠品" v-if="model.awardType===5">
								<dt-product-select v-model="model.awardValue" :data="model.goodsProduct"></dt-product-select>
							</el-form-item>
							<el-form-item prop="remark" label="活动简介">
								<el-input type="textarea" :rows="3" v-model="model.remark" placeholder="可空，512字符内"></el-input>
							</el-form-item>
							<el-form-item prop="sortId" label="排序数字">
								<el-input type="number" v-model="model.sortId" placeholder="数字越小越排前"></el-input>
							</el-form-item>
							<el-form-item label="创建时间" v-if="model.id>0">
								{{model.addBy}} {{model.addTime}}
							</el-form-item>
							<el-form-item label="最后更新" v-if="model.id>0&&model.updateTime">
								{{model.updateBy}} {{model.updateTime}}
							</el-form-item>
						</el-form>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>

		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtProductSelect from '../../../components/DtProductSelect.vue'
	import DtCouponSelect from '../../../components/DtCouponSelect.vue'
	
	export default {
		components: {
			DtProductSelect,
			DtCouponSelect
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				model: {
					id: 0,
					merchantId: 0,
					title: null,
					remark: null,
					startTime: null,
					endTime: null,
					condition: null,
					awardType: null,
					awardValue: 0,
					status: 0,
					sortId: 99,
					addBy: null,
					addTime: null,
					updateBy: null,
					updateTime: null,
					shopCoupon: null,
					goodsProduct: null
				},
				rules: {
					title: [
						{ required: true, message: '请输入促销活动名称', trigger: 'blur' }
					],
					startTime: [
						{ required: true, message: '请选择开始时间', trigger: 'change' }
					],
					endTime: [
						{ required: true, message: '请选择结束时间', trigger: 'change' }
					],
					condition: [
						{ required: true, message: '请输入消费门槛金额', trigger: 'blur' },
						{ pattern: /^(([1-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
					],
					awardType: [
						{ required: true, message: '请选择促销类型', trigger: 'change' }
					],
					awardValue: [
						{ required: true, message: '请输入金额或积分值', trigger: 'blur' },
						{ pattern: /^[1-9]\d*$/, message: '只能大于零正整数', trigger: 'blur' }
					],
					sortId: [
						{ required: true, message: '请输入排序数字', trigger: 'blur' },
						{ pattern: /^-?[1-9]\d*$/, message: '排序数字只能为整数', trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (_this.id) {
					_this.$api.request({
						url: '/merchant/shop/promotion/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//检查及组合参数
					if (_this.model.awardType === 4 && _this.model.awardValue === 0) {
						_this.$message({ type: 'warning', message: '错误提示：请选择赠送优惠券' });
						return false;
					}
					if (_this.model.awardType == 5 && _this.model.awardValue === 0) {
						_this.$message({ type: 'warning', message: '错误提示：请选择关联的赠品' });
						return false;
					}
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: '/shop/promotion/' + _this.model.id,
							data: _this.model,
							successMsg: '促销活动修改成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//可跳转加列表页
								_this.$common.linkUrl('/shop/rule/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/merchant/shop/promotion',
							data: _this.model,
							successMsg: '促销活动新增成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								_this.$refs['editForm'].resetFields(); //重置表单
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>